<template>
  <section class="main">
    <div class="title">
      <span>分账详情</span>
      <div>
        <el-button type="primary" @click="back()">返回</el-button>
      </div>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>订单号</div>
          <div>{{ tradeInfo.tradeNo }}</div>
        </div>
        <div class="line">
          <div>交易商户名</div>
          <div>{{ tradeInfo.tradeMerName }}</div>
        </div>
        <div class="line">
          <div>交易商户号</div>
          <div>{{ tradeInfo.tradeMerNo }}</div>
        </div>
        <div class="line">
          <div>交易金额</div>
          <div>{{ tradeInfo.totalFee }}</div>
        </div>
        <div class="line">
          <div>分账类型</div>
          <div>{{ tradeInfo.splitType === 1 ? '同步分账' :  '异步分账' }}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>分账时间</div>
          <div>{{ tradeInfo.settleTime }}</div>
        </div>
        <div class="line">
          <div>分账商户名</div>
          <div>{{ tradeInfo.splitMerName }}</div>
        </div>
        <div class="line">
          <div>分账商户号</div>
          <div>{{ tradeInfo.splitMerNo }}</div>
        </div>
        <div class="line" v-if="tradeInfo.splitFee">
          <div>分账金额</div>
          <div>{{ tradeInfo.splitFee }}</div>
        </div>
         <div class="line" v-else>
          <div>分账比例（百分比）</div>
          <div>{{ tradeInfo.splitRate }}</div>
        </div>
        <div class="line">
          <div>是否手续费承担方</div>
          <div>{{ tradeInfo.feeFlag === 'Y' ? '是' :  '否' }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getTradeDetail, orderlist } from "@/api/api";
export default {
  data() {
    return {
        id: this.$route.query.id,
        tradeInfo: {}
    }
  },
  created() {
      this.getTrade()
  },
  methods: {
    // 返回上一级
    back() {
        this.$router.back(-1)
    },
    // 获取分账详情
    async getTrade() {
        const res = await getTradeDetail(this.id)
        if(res.code === 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        } else {
            this.tradeInfo = res.data
            console.log(this.tradeInfo);
        }
    }
  },
};
</script>

<style scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 25%;
  text-align: left;
  word-break: break-all;
}
.container .itemBox .line div:nth-child(2) {
  width: 75%;
  text-align: left;
  color: #888888;
  word-break: break-all;
}
.container .payBox {
  width: 100%;
}
.container .payBox .thead {
  border-bottom: 1px solid #dddddd;
  display: flex;
  padding-top: 15px;
}
.container .payBox .thead span {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.container .payBox .tbody {
  display: flex;
  padding: 15px 0;
}
.container .payBox .tbody div {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tabbox {
  width: 100%;
  background: #fff;
}
.tableBox {
  width: 95%;
  margin: 0 auto;
}
.red {
  color: red;
}
.magin{
  margin-left: 5px;
}
</style>
